<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<title>毒蘑菇森林</title>

<style>

/* 像素风黑色森林背景 */

body {

margin: 0;

padding: 0;

background-color: #000;

color: white;

font-family: 'Courier New', monospace;

text-align: center;

min-height: 100vh;

overflow-x: hidden;

}

/* 动态炫彩标题 */

h1, h2 {

animation: rainbow 3s linear infinite;

transform: rotate(-3deg);

margin: 20px auto;

}

@keyframes rainbow {

0% { color: red; }

16% { color: orange; }

33% { color: yellow; }

50% { color: green; }

66% { color: blue; }

83% { color: indigo; }

100% { color: violet; }

}

.mushroom-list {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 20px;

padding: 40px;

}

.mushroom-card {

background-color: rgba(255, 255, 255, 0.1);

border: 2px solid #fff;

border-radius: 10px;

width: 200px;

padding: 15px;

transition: transform 0.3s ease;

}

.mushroom-card:hover {

transform: scale(1.05) rotate(2deg);

}

.mushroom-card img {

max-width: 100%;

border-radius: 8px;

}

footer {

margin-top: 40px;

font-size: 0.9em;

color: #aaa;

}

</style>

</head>

<body>

<h1>欢迎来到毒蘑菇森林</h1>

<h2>为了避免中毒身亡，请认识这些蘑菇</h2>

<div class="mushroom-list">

<div class="mushroom-card">

<img src="amanita.jpg" alt="暴君蘑菇">

<p><strong>暴君蘑菇</strong><br>Amanita muscaria</p>

</div>

<div class="mushroom-card">

<img src="psilocybe.jpg" alt="迷幻蘑菇">

<p><strong>迷幻蘑菇</strong><br>Psilocybe spp.</p>

</div>

<div class="mushroom-card">

<img src="cortinarius.jpg" alt="烟熏伞">

<p><strong>烟熏伞</strong><br>Cortinarius spp.</p>

</div>

<div class="mushroom-card">

<img src="lactarius.jpg" alt="黄色毒伞">

<p><strong>黄色毒伞</strong><br>Lactarius torminosus</p>

</div>

<div class="mushroom-card">

<img src="yellow-spotted.jpg" alt="黄斑蘑菇">

<p><strong>黄斑蘑菇</strong></p>

</div>

<div class="mushroom-card">

<img src="yellow-cap.jpg" alt="黄盖鹅膏">

<p><strong>黄盖鹅膏</strong></p>

</div>

</div>

<footer>

⚠️ 请勿食用野外蘑菇！本页面仅供科普用途。

</footer>

</body>

</html>